<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Stars Rating</title>

    <script type="text/javascript">
<!--
    var set=false;
    var v=0;
    var a;
loadStars = function (){
    star1 = new Image();
    star1.src = "../App_Themes/myTheme/images/EmptyStar.png";
    star2 = new Image();
    star2.src= "../App_Themes/myTheme/images/FilledStar.png";
};

highlight = function(x){
    if (set==false){
	    y=x*1+1
	    for (i=1;i<y;i++){
            document.getElementById(i).src= star2.src;
        }
	}
	else{
	    set=false;
	}
};
losehighlight = function(x){
    if (set==false){
	    for (i=1;i<11;i++){
		    document.getElementById(i).src=star1.src;
		}
	}
	else{
	    set=false;
	}
};
setStar = function(x){
    y=x*1+1
    flash(x);
    document.getElementById('StarRate').value = x;
    if (set==false){
	    set=true;
	}	
};
flash = function(a){
    y=a*1+1
    for (i=1;i<y;i++)	{
		document.getElementById(i).src= star2.src; 
	}
};
-->
    </script>

</head>
<body onload="loadStars()">
    <img src="../App_Themes/myTheme/images/EmptyStar.png" onmouseover="highlight(this.id)"
        onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="1" style="float: left;" title="1" alt="1">
    <img src="../App_Themes/myTheme/images/EmptyStar.png" onmouseover="highlight(this.id)"
        onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="2" style="float: left;" title="2" alt="2">
    <img src="../App_Themes/myTheme/images/EmptyStar.png" onmouseover="highlight(this.id)"
        onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="3" style="float: left;" title="3" alt="3">
    <img src="../App_Themes/myTheme/images/EmptyStar.png" onmouseover="highlight(this.id)"
        onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="4" style="float: left;" title="4" alt="4">
    <img src="../App_Themes/myTheme/images/EmptyStar.png" onmouseover="highlight(this.id)"
        onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="5" style="float: left;" title="5" alt="5">
    <img src="../App_Themes/myTheme/images/EmptyStar.png" onmouseover="highlight(this.id)"
        onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="6" style="float: left;" title="6" alt="6">
    <img src="../App_Themes/myTheme/images/EmptyStar.png" onmouseover="highlight(this.id)"
        onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="7" style="float: left;" title="7" alt="7">
    <img src="../App_Themes/myTheme/images/EmptyStar.png" onmouseover="highlight(this.id)"
        onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="8" style="float: left;" title="8" alt="8">
    <img src="../App_Themes/myTheme/images/EmptyStar.png" onmouseover="highlight(this.id)"
        onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="9" style="float: left;" title="9" alt="9">
    <img src="../App_Themes/myTheme/images/EmptyStar.png" onmouseover="highlight(this.id)"
        onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="10" style="float: left;" title="10" alt="10">
        
    <input type="text" id="StarRate" />
</body>
</html>
